<template>
	<div id="app" class="edit_dev">
		<el-cascader popper-class="areaBG" size="medium" :options="data.options" v-model="option" @change="handleChange"
			placeholder="选择地址" style="width: 250px;">
		</el-cascader>
	</div>

</template>

<script>
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	import {
		defineComponent,
		reactive,
		onMounted,
		computed,
		ref,
		watch
	} from 'vue'
	export default defineComponent({
		props: ['area'],
		setup(props, ctx) {

			const data = reactive({
				options: regionData,
				selectedOptions: []
			})


			const option = computed(() => {
				if (props.area && props.area.length > 0) {

					let res = []
					props.area.forEach(item => {
						res.push(item.code)
					})
					return res
				} else
					return []
			})
			watch(
				() => props.area,
				(count, prevCount) => {
					/* ... */
					console.log("jkin>>>>>>>>>>>>>>>>")
					// if (props.area && props.area.length == 3) {
					// 	data.selectedOptions = [TextToCode[props.area[0]]['code'], TextToCode[props.area[0]][
					// 		props.area[1]
					// 	]['code'], TextToCode[props.area[0]][props.area[1]][props.area[2]]['code']]
					// }
				}
			)

			const handleChange = (value) => {
				console.log(value)
				let area = [{
						code: value[0],
						name: CodeToText[value[0]]
					},
					{
						code: value[1],
						name: CodeToText[value[1]]
					},
					{
						code: value[2],
						name: CodeToText[value[2]]
					},
				]
				ctx.emit('update:area', area)
			}
			return {
				data,
				handleChange,
				option
			}
		}

	})
</script>

<style>
	.areaBG {}

	/* .el-cascader-panel {

		background: #ffffff;
	} */
</style>
